import React, { useLayoutEffect } from 'react';
import {
  View,
  Image,
  Text,
  navigateTo,
  hideMenuButton,
  exitMiniProgram,
  router,
  showToast,
} from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';

import { getCachedLaunchOptions } from '@/api/getCachedLaunchOptions';
import { NavBar } from '@ray-js/smart-ui';
import res from '@/res/images';
import styles from './index.module.less';
// import res from '../../../res';

const { deviceId, groupId } = getCachedLaunchOptions()?.query ?? {};

export function NavBarCustom({ name = '', back }: { name?: string; back?: boolean }) {
  const deviceName = useDevice(d => d?.devInfo?.name);

  useLayoutEffect(() => {
    hideMenuButton();
  }, []);

  const onClickLeft = () => {
    if (back) {
      router.back();
      return;
    }

    exitMiniProgram();
  };

  return (
    <NavBar
      title={name || deviceName}
      className={styles.navBar}
      customClass={styles.borBot}
      // onClickLeft={onClickLeft}
      slot={{
        right: (
          <View className={styles.tabTopIconWrap}>
            <Image
              onClick={() => {
                const jumpUrl = `functional://settings/detail?deviceId=${deviceId || ''}&groupId=${
                  groupId || ''
                }`;
                navigateTo({
                  url: jumpUrl,
                });
              }}
              src={res.editTitle}
            />
          </View>
        ),
        left: (
          <View className={styles.tabTopIconWrap}>
            <Image onClick={onClickLeft} src={res.leftArrow} />
          </View>
        ),
      }}
    />
  );
}

export default NavBarCustom;
